<template>
  <div class="edit-group youke">
    <van-nav-bar
      :title="$route.query.pay|payText(0)"
      left-arrow
      fixed
      @click-left="onBack('/user/payment')"
    >
      <van-button slot="right" size="small" type="info" @click="sendFun">保存</van-button>
    </van-nav-bar>
    <Main>
      <template slot="main">
        <template v-if="$route.query.pay==1||$route.query.pay==2">
          <div class="pay-upload" v-show="uploadImg==''">
            <van-uploader name="uploader" :after-read="onRead" ref="payupload" class="upload-pay">
              <van-icon name="plus"/>
            </van-uploader>
            <div class="pay-upload-text">请上传{{$route.query.pay|payText(1)}}收款码</div>
          </div>
          <div class="upload-img" v-show="uploadImg!=''" @click="changesfun">
            <img :src="uploadImg" alt>
          </div>
        </template>
        <template v-else-if="$route.query.pay==3">
          <div class="inputs-group">
            <van-field v-model="banknName" clearable label="持卡人" placeholder="请输入开户人姓名"/>
            <van-field v-model="bankaddres" label="卡户银行" placeholder="请输入卡户银行"/>
            <!--  right-icon="arrow" readonly @click="show=true" -->
            <van-field v-model="bankcard" clearable label="卡号" placeholder="请输入卡号"/>
          </div>
        </template>
        <template v-else>暂无内容</template>
      </template>
    </Main>
    <van-popup v-model="show" position="bottom">
      <van-picker
        show-toolbar
        title="卡户银行"
        :columns="columns"
        value-key="value"
        @cancel="onCancel"
        @confirm="onConfirm"
      />
    </van-popup>
    <van-popup v-model="showloading">
      <van-loading size="50px" type="spinner" text-size="24px" vertical color="#1989fa"></van-loading>
      <div class="texts">上传中...</div>
    </van-popup>
  </div>
</template>

<script type="text/ecmascript-6">
import { user } from "@/api";

export default {
  //接收父级传递的参数
  props: [],
  //监听数据变化
  watch: {},
  data() {
    return {
      uploadImg: "",
      banknName: "",
      bankaddres: "",
      bankcard: "",
      files: "",
      columns: [
        {
          id: 1,
          value: "建设银行"
        },
        {
          id: 2,
          value: "邮政储蓄银行"
        },
        {
          id: 3,
          value: "工商银行"
        }
      ],
      show: false,
      showloading: false
    };
  },
  //实例初始化之前触发事件
  beforeCreate() {},
  //实例化之后触发事件
  created() {},
  //实时监控data参数数据变化
  computed: {},
  //模板组件
  components: {},
  //执行方法
  methods: {
    sendFun() {
      //  成功过后跳转到
      let _post = null;

      if (this.$route.query.pay == 1) {
        _post = user.bindwx({ wx: this.uploadImg });
      }
      if (this.$route.query.pay == 2) {
        _post = user.bindali({ zfb: this.uploadImg });
      }

      if (this.$route.query.pay == 3) {
        let data = {
          name: this.banknName,
          yhname: this.bankaddres,
          yhknum: this.bankcard
        };
        if (!this.banknName) {
          this.$toast.fail("卡户银行不能为空");
          return;
        }
        if (!this.bankaddres ) {
          this.$toast.fail("开户人姓名不能为空");
          return;
        }
        if (!this.bankcard) {
          this.$toast.fail("银行卡号不能为空");
          return;
        }
        _post = user.bindbank(data);
      }
      this.showloading = true;
      _post.then(res => {
        if (res.code == 1000) {
          let that = this;
          that.$toast(res.reason);
          setTimeout(function() {
            that.$router.push(
              `/user/paymentdetail?pay=${that.$route.query.pay}`
            );
            this.showloading = false;
          }, 1500);
        } else {
          this.showloading = false;
        }
      });
    },
    onRead(file, detail) {
      // console.log(file, detail);
      this.files = file.file;
      this.uploadImg = file.content;
    },
    changesfun() {
      this.$refs.payupload.$refs.input.click();
    },
    onConfirm(value, index) {
      // console.log(value, index);
      this.bankaddres = value.value;
      this.show = false;
    },
    onCancel() {
      this.show = false;
    }
  },
  filters: {
    payText(value, t) {
      console.log(value);
      let name = `微信${t == 0 ? "绑定" : ""}`;
      switch (value) {
        case "1":
          name = `微信${t == 0 ? "绑定" : ""}`;
          break;
        case "2":
          name = `支付宝${t == 0 ? "绑定" : ""}`;
          break;
        case "3":
          name = `银行卡${t == 0 ? "绑定" : ""}`;
          break;

        default:
          name = `微信${t == 0 ? "绑定" : ""}`;
          break;
      }
      return name;
    }
  },
  mounted() {}
  //路由退出时候调用
  //beforeRouteLeave(to, from, next){next()}
};
</script>

<style scoped lang="less">
.edit-group {
  .pay-upload {
    margin-top: 2rem;

    .upload-pay {
      width: 6.25rem;
      height: 6.25rem;
      margin: auto;
      display: block;
      background: #fff;

      .van-icon {
        font-size: 4rem;
        color: #ededed;
        width: 6.25rem;

        &::before {
          display: block;
          text-align: center;
          line-height: 6.25rem;
        }
      }
    }

    .pay-upload-text {
      font-size: 1rem;
      margin-top: 2rem;
      text-align: center;
    }
  }

  .upload-img {
    width: 100%;

    img {
      width: 100%;
    }
  }
}
.van-popup {
  background: none;
  .texts {
    color: #fff;
    margin-top: 1rem;
  }
}
</style>
